<template>
    <div>
        <a-form
            ref="registerFormRef"
            class="login"
            :model="formState"
            name="register-form"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
            autocomplete="off"
        >
            <a-form-item
                class="login__field"
                name="account"
                :rules="[{ required: true, message: '请输入账户!', trigger: 'blur' }]"
            >
                <a-input class="login__input" v-model:value="formState.account" style="width: 100%;" placeholder="请输入账户">
                    <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
            </a-form-item>
            <a-form-item
                class="login__field"
                name="phone"
                :rules="[{ required: true, message: '请输入手机号!', trigger: 'blur' }]"
            >
                <a-input class="login__input" v-model:value="formState.phone" style="width: 100%;" placeholder="请输入手机号">
                    <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
            </a-form-item>
            <a-form-item
                class="login__field"
                name="realName"
                :rules="[{ required: true, message: '请输入姓名!', trigger: 'blur' }]"
            >
                <a-input class="login__input" v-model:value="formState.realName" style="width: 100%;" placeholder="请输入姓名">
                    <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                </a-input>
            </a-form-item>
            <a-form-item
                class="login__field"
                name="password"
                :rules="[{ required: true, message: '请输入密码!' , trigger: 'blur'}]"
            >
                <a-input-password class="login__input" v-model:value="formState.password" style="width: 100%;" placeholder="请输入密码">
                    <template #prefix>
                        <LockOutlined style="color: rgba(0, 0, 0, 0.25)"/>
                    </template>
                </a-input-password>
            </a-form-item>

            <a-form-item
                class="login__field"
                name="confirmPassword"
                :rules="[{ required: true, message: '请确认密码!' , trigger: 'blur' },{ validator: validatePass2, trigger: 'change' }]"
            >
                <a-input-password class="login__input" v-model:value="formState.confirmPassword" style="width: 100%;" placeholder="请确认密码">
                    <template #prefix>
                        <LockOutlined style="color: rgba(0, 0, 0, 0.25)"/>
                    </template>
                </a-input-password>
            </a-form-item>

            <a-form-item
                class="login__field"
                name="code"
                :rules="[{ required: true, message: '请输入验证码!' , trigger: 'blur' }]"
            >
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-input class="login__input" v-model:value="formState.code" style="width: 100%;" placeholder="请输入验证码" :maxlength="4"/>
                    </a-col>
                    <a-col :span="12">
                        <div :class="[state.expirySeconds > 0 ? 'login-content-code' : 'login-content-code-expired']" @click="getCaptcha">
                            <img class="login-content-code-img" width="130px" height="38px" :src="state.captchaImage" style="cursor: pointer" />
                        </div>
                    </a-col>
                </a-row>
            </a-form-item>
            <!-- <a-form-item
                class="login__field"
                name="regWayId"
                :rules="[{ required: true, message: '请输入租户!' , trigger: 'blur' }]"
            >
                <a-select
                        v-model:value="formState.tenantId"
                        class="w-full"
                    >
                        <a-select-option
                            v-for="(item,index) in state.tenantList" 
                            :key="index"
                            :value="item.id"
                        >
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
            </a-form-item> -->

            <a-form-item>
                <a-button class="login__submit" type="primary" @click="handleRegister">
                    注册
                </a-button>
            </a-form-item>

        </a-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { apiSysAuthCaptchaGet } from '@/api/sys/sysAuth'
import type { FormInstance } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
// import { sm2 } from 'sm-crypto-v2';
import {sm2} from 'sm-crypto'
import type { ResType } from '@/api/types'
import { apiSysConfigSysInfoGet } from '@/api/sys/sysConfig'
import { apiSysTenantPagePost } from '@/api/sys/sysTenant'
import type { TableParamsResType } from '@/views/system/onlineUser/type'

interface FormState {
    account: string
    password: string
    confirmPassword: string
    code: string
    codeId: number | null
    phone:string
    realName:string
    tenantId:any
}

const registerFormRef = ref<FormInstance>()
const formState = reactive<FormState>({
    account: '',
    password: '',
    confirmPassword: '',
    code: '',
    codeId: null,
    phone:"",
    realName:"",
    tenantId:null,
})

const state = reactive({
    captchaImage: '',
    expirySeconds: 0,
    codeId: '',
    tenantList:[]
})

// 处理注册
const handleRegister =async () => {
    await registerFormRef.value?.validate()
    Reflect.deleteProperty(formState,'confirmPassword')
    const publicKey = import.meta.env.VITE_SM_PUBLIC_KEY
    // 加密
    const password = sm2.doEncrypt(formState.password,publicKey,1)
    formState.password = password
}

const validatePass2 = async (_rule: Rule, value: string) => {
    if (value === '') {
        return Promise.reject('Please input the password again');
    } else if (value !== formState.password) {
        return Promise.reject("Two inputs don't match!");
    } else {
        return Promise.resolve();
    }
};
// 获取验证码
const getCaptcha = async () => {
    formState.code = ''
    let res:any = await apiSysAuthCaptchaGet()
    state.captchaImage = 'data:text/html;base64,' + res.data.result.img
    state.expirySeconds = res.data.result.expirySeconds
    formState.codeId = res.data.result.id
}

onMounted(async()=>{
    // state.tenantList = res.data.result.items ?? []
    // formState.tenantId = res.data.result.items[0].id
    getCaptcha()
})
</script>

<style lang="scss" scoped>

.login {
	width: 100%;
	padding: 30px;
    margin-top: -75px;
}

.login__field {	
	position: relative;	
}

.login__icon {
	position: absolute;
	top: 30px;
	color: #7875B5;
}

.login__input {
	border: none;
	border-bottom: 2px solid #D1D1D4;
	background: none;
	padding: 10px;
	padding-left: 24px;
	font-weight: 700;
	width: 75%;
	transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
	outline: none;
	border-bottom-color: #6A679E;
}

.login__submit {
    margin-top: 10px;
	background: #fff;
	font-size: 14px;
	border-radius: 26px;
	text-transform: uppercase;
	font-weight: 700;

	width: 100%;
	color: #4C489D;
	box-shadow: 0px 2px 2px #5C5696;
	cursor: pointer;
	transition: .2s;
}

.login-content-code {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;

		.login-content-code-img {
			width: 100%;
			height: 40px;
			line-height: 40px;
			background-color: #ffffff;
			border: 1px solid rgb(220, 223, 230);
			cursor: pointer;
			transition: all ease 0.2s;
			border-radius: 4px;
			user-select: none;

			&:hover {
				border-color: #c0c4cc;
				transition: all ease 0.2s;
			}
		}
	}

	.login-content-code-expired {
		@extend .login-content-code;
		&::before {
			content: '验证码已过期';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 4px;
			background-color: rgba(0, 0, 0, 0.5);
			color: #ffffff;
			text-align: center;
		}
	}
.login__back {
    text-align: center;
    margin-top: 20px;
    
    a {
        color: #4C489D;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
        
        &:hover {
            text-decoration: underline;
        }
    }
}
</style>